<template>
  <div class="home">
    <!-- 主体内容 -->
    <div class="main-container">
      <FastBar></FastBar>
      <PageRecommendation></PageRecommendation>
      <div class="cars-container">
        <el-divider content-position="left">
          <div class="title-bar">
            <p>轿车</p>
            <fc-underline-btn @click="carSwitch('轿车')"
              >换一换</fc-underline-btn
            >
            <fc-underline-btn>更多</fc-underline-btn>
          </div>
        </el-divider>
        <div class="salooncar car-container">
          <div class="bg">
            <el-row :gutter="20">
              <el-col
                :span="6"
                v-for="(item, index) in jiaoche_Data"
                :key="index"
              >
                <el-card
                  shadow="hover"
                  style="background-color: "
                  body-style="0"
                >
                  <div class="carImg" @click="toDetails(item.urlId)">
                    <img :src="item.url" alt="" />
                    <div>
                      <span>{{ item.carName }}</span>
                      <span>{{
                        item.price == null
                          ? "暂无报价"
                          : "￥" + item.price + "万"
                      }}</span>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>
        <el-divider content-position="left">
          <div class="title-bar">
            <p>SUV</p>
            <fc-underline-btn @click="carSwitch('SUV')"
              >换一换</fc-underline-btn
            >
            <fc-underline-btn>更多</fc-underline-btn>
          </div>
        </el-divider>
        <div class="suv car-container">
          <div class="bg">
            <el-row :gutter="20">
              <el-col :span="6" v-for="(item, index) in SUV_Data" :key="index">
                <el-card
                  shadow="hover"
                  style="background-color: "
                  body-style="0"
                >
                  <div class="carImg" @click="toDetails(item.urlId)">
                    <img :src="item.url" alt="" />
                    <div>
                      <span>{{ item.carName }}</span>
                      <span>{{
                        item.price == null
                          ? "暂无报价"
                          : "￥" + item.price + "万"
                      }}</span>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>
        <el-divider content-position="left">
          <div class="title-bar">
            <p>跑车</p>
            <fc-underline-btn @click="carSwitch('跑车')"
              >换一换</fc-underline-btn
            >
            <fc-underline-btn>更多</fc-underline-btn>
          </div>
        </el-divider>
        <div class="roadster car-container">
          <div class="bg">
            <div class="bg">
              <el-row :gutter="20">
                <el-col
                  :span="6"
                  v-for="(item, index) in paoche_Data"
                  :key="index"
                >
                  <el-card
                    shadow="hover"
                    style="background-color: "
                    body-style="0"
                  >
                    <div class="carImg" @click="toDetails(item.urlId)">
                      <img :src="item.url" alt="" />
                      <div>
                        <span>{{ item.carName }}</span>
                        <span>{{
                          item.price == null
                            ? "暂无报价"
                            : "￥" + item.price + "万"
                        }}</span>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
        <el-divider content-position="left">
          <div class="title-bar">
            <p>微面</p>
            <fc-underline-btn @click="carSwitch('微面')"
              >换一换</fc-underline-btn
            >
            <fc-underline-btn>更多</fc-underline-btn>
          </div>
        </el-divider>
        <div class="minivan car-container">
          <div class="bg">
            <div class="bg">
              <el-row :gutter="20">
                <el-col
                  :span="6"
                  v-for="(item, index) in weimian_Data"
                  :key="index"
                >
                  <el-card
                    shadow="hover"
                    style="background-color: "
                    body-style="0"
                  >
                    <div class="carImg" @click="toDetails(item.urlId)">
                      <img :src="item.url" alt="" />
                      <div>
                        <span>{{ item.carName }}</span>
                        <span>{{
                          item.price == null
                            ? "暂无报价"
                            : "￥" + item.price + "万"
                        }}</span>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 导入组件，WebComponent
import FastBar from "@/components/home/FastBar.vue";
import PageRecommendation from "@/components/home/PageRecommendation.vue";
import axios from "axios";

export default {
  name: "HomeView",
  components: { FastBar, PageRecommendation },
  data() {
    return {
      //汽车的四个信息
      refreshContainer: "换一换",
      skipURL: "更多",
      loginStr: "登录",
      registerStr: "注册",

      //汽车数据
      car_img_data: [],

      // 换一换数据
      jiaoche_Data: null,
      paoche_Data: null,
      SUV_Data: null,
      weimian_Data: null,
    };
  },
  methods: {
    // 换一换
    carSwitch(carName) {
      let carData;
      axios
        .get("/cars/switch?type=" + carName)
        .then((res) => {
          carData = res.data.data;
          switch (true) {
            case carName == "轿车":
              return (this.jiaoche_Data = carData);
            case carName == "跑车":
              return (this.paoche_Data = carData);
            case carName == "SUV":
              return (this.SUV_Data = carData);
            case carName == "微面":
              return (this.weimian_Data = carData);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 详情页
    toDetails(urlId) {
      // console.log(urlId);
      this.$router.push(`/cardetail/${urlId}`);
    },
  },

  created() {
    this.carSwitch("轿车");
    this.carSwitch("跑车");
    this.carSwitch("SUV");
    this.carSwitch("微面");
  },

  mounted() {},
};
</script>

<style lang="scss" scoped>
/* 主页样式 */
* {
  margin: 0;
  padding: 0;
}

.main-container {
  margin-top: 75px;
  height: 12;
  overflow: auto;
}

.el-main {
  width: 100vw;
  height: 95vh;
  padding: 10px;
  background-color: burlywood;
  overflow: hidden;
}

.el-footer {
  height: 5vh;
}

$hoverEasing: cubic-bezier(0.23, 1, 0.32, 1);
$returnEasing: cubic-bezier(0.445, 0.05, 0.55, 0.95);

.title {
  font-family: "Raleway";
  font-size: 24px;
  font-weight: 700;
  color: #5d4037;
  text-align: center;
}

p {
  line-height: 1.5em;
}

h1 + p,
p + p {
  margin-top: 10px;
}

.carImg {
  // width: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  img {
    width: 230px;
    display: block;
  }

  > div {
    display: flex;
    justify-content: space-around;
    width: 250px;

    span {
      font-size: 18px;
    }
  }
}

.cars-container {
  padding: 40px 40px;
  padding-bottom: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  background-color: #34373c;
}

.car-container {
  width: 93vw;
  height: 540px;
  aspect-ratio: 1;
  overflow: hidden;
  box-shadow: 10px 10px 15px 3px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  z-index: 50;
  margin-top: 5px;
  margin-bottom: 5px;
}

.el-card.is-hover-shadow:hover,
.el-card.is-hover-shadow:focus {
  box-shadow: 0px 6px 20px 6px rgba(0, 0, 0, 0.5);
}

.bg {
  background-color: #fff;
  /* background-image: url("https://www.nhm.ac.uk/resources/visit/wpy/2021/large/webp/e16fda89-ed06-41a4-93a2-b369b65df837.webp"); */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  height: 100%;
  padding: 0px 10px;
  /* filter: blur(10px); */
}

.cars-container p {
  font-size: 25px;
  margin: 5px;
}

.title-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 300px;
}

.card-wrap {
  margin: 10px;
  transform: perspective(800px);
  transform-style: preserve-3d;
  cursor: pointer;

  &:hover {
    .card-info {
      transform: translateY(0);
    }

    .card-info p {
      opacity: 1;
    }

    .card-info,
    .card-info p {
      transition: 0.6s $hoverEasing;
    }

    .card-info:after {
      transition: 5s $hoverEasing;
      opacity: 1;
      transform: translateY(0);
    }

    .card-bg {
      transition: 0.6s $hoverEasing, opacity 5s $hoverEasing;
      opacity: 0.8;
    }

    .card {
      transition: 0.6s $hoverEasing, box-shadow 2s $hoverEasing;
      box-shadow: rgba(white, 0.2) 0 0 40px 5px, rgba(white, 1) 0 0 0 1px,
        rgba(black, 0.66) 0 30px 60px 0, inset #333 0 0 0 5px,
        inset white 0 0 0 6px;
    }
  }
}

.card {
  position: relative;
  flex: 0 0 240px;
  width: 240px;
  height: 320px;
  background-color: #333;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: rgba(black, 0.66) 0 30px 60px 0, inset #333 0 0 0 5px,
    inset rgba(white, 0.5) 0 0 0 6px;
  transition: 1s $returnEasing;
}

.card-bg {
  opacity: 0.5;
  position: absolute;
  top: -20px;
  left: -20px;
  width: 100%;
  height: 100%;
  padding: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: 1s $returnEasing, opacity 5s 1s $returnEasing;
  pointer-events: none;
}

.card-info {
  padding: 20px;
  position: absolute;
  bottom: 0;
  color: #fff;
  transform: translateY(40%);
  transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);

  p {
    opacity: 0;
    text-shadow: rgba(black, 1) 0 2px 3px;
    transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  * {
    position: relative;
    z-index: 1;
  }

  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(#000, 0.6) 100%
    );
    background-blend-mode: overlay;
    opacity: 0;
    transform: translateY(100%);
    transition: 5s 1s $returnEasing;
  }
}

.card-info h1 {
  font-family: "Playfair Display";
  font-size: 36px;
  font-weight: 700;
  text-shadow: rgba(black, 0.5) 0 10px 10px;
}

/* 汽车类型页标题 */
.el-divider__text {
  position: absolute;
  background-color: #34373c;
  padding: 0 20px;
  font-weight: 500;
  color: #fff;
  font-size: 14px;
}

/* 按钮 */
fc-parenthesis-btn {
  --color: #fff;
  margin: 10px;
}

fc-underline-btn {
  --color: #fff;
}

fc-3d-btn {
  margin: 10px;
  --shadow-color: rgb(89, 100, 122);
  --cover-color: rgb(231, 224, 173);
  --inset-shadow-color: rgb(245, 243, 239);
  --color: #333;
  color: #fff;
}

fc-typing-input {
  --color: #fff;
  --circle-color: #fff;
  --circle-color-hover: #fff;
  --placeholder-animate-title-color: #333;
}

.el-card {
  // width: 300px;
  height: 230px;
  margin: 10px;
  margin-top: 22px;
}
</style>
